<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../jquery/jquery-1.4.2.min.js"></script>
<title>Jquery导航栏</title>
<style type="text/css">
	body {font-family:arial; font-size:11px;}
	
	.clear {clear:both}    
	
	#nav {   
	    margin:0;    
	    padding:0;    
	    list-style:none;
	}
       
    /* make the LI display inline */   
    /* it's position relative so that position absolute */
    /* can be used in submenu */   
    #nav li {   
        float:left;    
        display:block;    
        width:100px;
        background:#ccc;
        position:relative;
        z-index:500;
        margin:0 1px;
    }   
           
    /* this is the parent menu */   
    #nav li a {   
        display:block;    
        padding:8px 5px 0 5px;    
        font-weight:700;     
        height:23px;    
        text-decoration:none;    
        color:#fff;    
        text-align:center;    
        color:#333;   
    }   
  
    #nav li a:hover {
        color:#fff;
    }

    #nav a.selected {
        color:#f00;
    }   
       
       
       
    #nav ul {   
        position:absolute;    
        left:0;  
        display:none;
        margin:0 0 0 -1px;
        padding:0;
        list-style:none;
    }
           
    #nav ul li {   
        width:100px;    
        float:left;    
        border-top:1px solid #fff;   
    }   
       
    #nav ul a {   
        display:block;     
        height:15px;   
        padding: 8px 5px;    
        color:#666;   
    }   
       
    #nav ul a:hover {   
        text-decoration:underline;     
    }

	*html #nav ul {
	    margin:0 0 0 -2px;
	}
</style>
<script type="text/javascript">
$(document).ready(function () {
    $('#nav li').hover(
        function () {
            var num = $('ul li',this).length;
            $('ul', this).animate({width : "110px",height : (num*16)+"px" },1000,function(){
                $(this).css({width : "100px",height : (num*15)+"px"});
            });
        },
        function () {   
            $('ul', this).slideUp("fast");            
        }
    );   
       
});
</script>
</head>
<body>
<ul id="nav">   
    <li><a href="#">Parent 01</a></li>   
    <li><a href="#" class="selected">Parent 02</a>   
        <ul>   
            <li><a href="#">Item 01</a></li>   
            <li><a href="#" class="selected">Item 02</a></li>   
            <li><a href="#">Item 03</a></li>   
        </ul>   
        <div class="clear"></div>   
    </li>   
    <li><a href="#">Parent 03</a>   
    <ul>   
        <li><a href="#">Item 04</a></li>   
        <li><a href="#">Item 05</a></li>   
        <li><a href="#">Item 06</a></li>   
        <li><a href="#">Item 07</a></li>   
    </ul>            
        <div class="clear"></div>   
    </li>   
    <li><a href="#">Parent 04</a></li>   
</ul>   
  
<div class="clear"></div>
</body>
</html>